<template>
	<div class="box">
		<!-- 面包屑预留位置 -->
			  <el-card style="width: 70%;">
				  <el-form ref="form" :model="form" label-width="80px">
				    <el-form-item label="姓名">
				      <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
				    </el-form-item>
					<el-form-item label="性别">
						<el-radio-group v-model="form.sex">
						  <el-radio label="男"></el-radio>
						  <el-radio label="女"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="出生年月">
						<!-- <span>{{form.birth}}</span> -->
						<el-date-picker type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="form.birth" style="width: 100%;"></el-date-picker>
					</el-form-item>
					<el-form-item label="学历">
						<el-select v-model="form.education" placeholder="请选择学历">
						  <el-option label="高中" value="高中"></el-option>
						  <el-option label="大专" value="大专"></el-option>
						  <el-option label="本科" value="本科"></el-option>
						  <el-option label="研究生" value="研究生"></el-option>
						</el-select>
					</el-form-item>
					
					<el-form-item label="籍贯">
						<el-input placeholder="请输入籍贯信息" v-model="form.addr"></el-input>
					</el-form-item>
					
					<el-form-item label="毕业院校">
						<el-input placeholder="请输入毕业院校" v-model="form.school"></el-input>
					</el-form-item>
					
					<el-form-item label="毕业时间">
						<!-- <span>{{form.graduateTime}}</span> -->
						<el-date-picker
						      v-model="form.graduateTime"
							  value-format="yyyy"
						      type="year"
						      placeholder="选择毕业时间">
						    </el-date-picker>
					</el-form-item>
					
					<el-form-item label="专业">
						<el-input placeholder="请输入专业" v-model="form.major"></el-input>
					</el-form-item>	
									
				    <!-- <el-form-item label="技能">
				      <el-checkbox-group v-model="form.skill">
				        <el-checkbox v-for="tip in skills" :label="tip" name="tip" :key="tip">{{tip}}</el-checkbox>
				      </el-checkbox-group>
				    </el-form-item> -->
				    
					<el-form-item label="技能">
						<!-- 添加新技能 -->
						<el-tag class="tags"
						  v-for="(item,index) in form.operateForm"
						  :key="index"
						  closable
						  @close="handleClose(item)">
						  {{item.skill}}-{{item.proficient}}
						</el-tag>
						<el-button @click = "skillOpen()" type="mini">添加技能+</el-button>
					</el-form-item>
					
				    <el-form-item label="项目经验">
						 <el-table
						      :data="this.form.experienceArray"
							  height="250"
							  border
						      style="width: 100%">
						      <el-table-column
						        prop="name"
						        label="项目名称"
						        width="100">
						      </el-table-column>
						      <el-table-column
						        prop="cycle"
						        label="项目周期"
						        width="100">
						      </el-table-column>
						      <el-table-column
						        prop="work"
						        label="负责工作"
								 width="180">
						      </el-table-column>
							  <el-table-column
								class="describe"
							    prop="describe"
							    label="项目描述"
							  	 width="250">
							  </el-table-column>
							  <el-table-column label="操作">
								  <template slot-scope="scope">
									  <!-- 修改按钮 -->
									  <el-button  type="primary" @click="showExperienceDialog(scope.$index)" icon="el-icon-edit" circle></el-button>
									  <!-- 删除按钮 -->
									  <el-button type="danger" icon="el-icon-delete" circle></el-button>
								  </template>
							  </el-table-column>
						    </el-table>
						<el-button @click = "experienceOpen()" type="mini">添加项目经验+</el-button>
				      <!-- <el-input type="textarea" v-model="form.experience1"></el-input> -->
				    </el-form-item>
					
					
				    <el-form-item>
				      <el-button type="primary" @click="onSubmit">立即创建</el-button>
				      <el-button>取消</el-button>
				    </el-form-item>
				  </el-form>
			  </el-card>
			  <!-- 添加技能栏 -->
			<el-dialog
				title="新增技能"
				:visible.sync="skillShow"
			>
				<common-form
					:formLabel="operateFormLabel"
					:form="operateForm"
					:inline="true"
					:ref="form"
					@onConfirm="onConfirm"
					@onClose = "onClose"
				>	
				</common-form>
				<!-- <div slot="footer" class="dialog-footer">
					<el-button @click="isShow = false">取消</el-button>
					<el-button type="primary" @click="confirm()">确定</el-button>
				</div> -->
			</el-dialog>
			
			<!-- 添加项目经验栏 -->
			<el-dialog
				:title="testExperience"
				:visible.sync="experienceShow"
			>
				<common-form
					:formLabel="experienceFormLabel"
					:form="experienceForm"
					:inline="false"
					:ref="experienceForm"
					@onConfirm="onConfirm"
					@onClose = "onClose"
				>
					<el-form-item label="项目描述" class="experience">
					    <el-input  type="textarea" v-model="experienceForm.describe"></el-input>
					</el-form-item>
				</common-form>
			</el-dialog>
		
	</div>
</template>

<script>
	import CommonForm from '../../src/components/CommonForm.vue'
	export default{
		components:{
			CommonForm
		},
		 data() {
		      return {
				editIndex : -1,
				activeNames:['1'],
		        form: {
		          name: '',
				  sex:'',
				  birth:'',
				  education:'',
				  school:'',
				  addr:'',
				  graduateTime:'',
				  major:'',
		          operateForm: [],
		          experienceArray: []
		        },
				skills:['java','javascript','html','css','echart','uni-app','vue全家桶','axios'],
				isSkillShow : false,
				skillShow : false,
				experienceShow :false,
				// 新增技能的表单元素
				operateFormLabel: [
					{
						model: 'skill',
						label: '技能',
						type: 'input'
					},
					{
						model: 'proficient',
						label: '熟练度',
						type: 'select',
						opts: [
							{
								label: '精通',
								value: '精通'
							},
							{
								label: '熟练',
								value: '熟练'
							},
							{
								label: '掌握',
								value: '掌握'
							},
							{
								label: '了解',
								value: '了解'
							}
						]
					}
				],
				
				operateForm:{
					skill:'',
					proficient:''
				},
				// 新增项目经验的表单元素
				experienceFormLabel : [
					{
						model : 'name',
						label : '项目名称',
						type : 'input'
					},
					{
						model : 'cycle',
						label : '项目周期',
						type : 'input'
					},
					{
						model : 'work',
						label : '负责工作',
						type : 'input'
					},
				],
				experienceForm:{
					name : '',
					cycle : '',
					work : '',
					describe : ''
				},
		      }
			  
		    },
		    methods: {
				// 新增技能
			skillOpen(){
				this.skillShow = true
				this.isSkillShow = true
			},
			// 新增项目经验
			experienceOpen(){
				this.experienceShow = true
				this.isSkillShow = false
			},
			// 提交表单信息
		      onSubmit() {
		        console.log(this.form)
		      },
			  // 添加技能/项目经验的dialog确定按钮
			 onConfirm(obj){
				  console.log(this.form.experienceArray,obj)
				  if(this.isSkillShow){
					  this.form.operateForm.push(obj)
					  this.skillShow = false
					  this.resetSikll()
				  }else{
					  if(this.editIndex < 0){
						 this.form.experienceArray.push(obj)
						 // console.log(this.form.experienceArray,'lalal')
						 this.experienceShow =false
						 this.resetExperience() 
					  }else{
						  let editIndex = this.editIndex
						  this.form.experienceArray[editIndex].cycle = obj.cycle
						  this.form.experienceArray[editIndex].name = obj.name
						  this.form.experienceArray[editIndex].work = obj.work
						  this.form.experienceArray[editIndex].describe = obj.describe
						  this.editIndex = -1
						  this.experienceShow =false
						  this.resetExperience() 
					  }
					  
				  }
				 
			 },
			 handleClose(tag){
				 this.form.operateForm.splice(this.form.operateForm.indexOf(tag), 1);
			 },
			 // 添加技能/项目经验的dialog里的取消按钮
			 onClose(){
				 if(this.isSkillShow){
					 this.skillShow = false,
					 this.resetSikll()
				 }else{
					  this.experienceShow =false,
					  this.resetExperience()
					  this.editIndex = -1
				 }
				 
			 },
			 // 重置添加技能
			 resetSikll(){
				 this.operateForm = {
					 skill:'',
					 proficient:''
				 }
			 },
			 // 重置添加技能经验
			 resetExperience(){
				 this.experienceForm = {
					 name : '',
					 cycle : '',
					 work : '',
					 describe : ''
				 }
			 },
			 // 修改项目经验
			 showExperienceDialog(index){
				 let experience = this.form.experienceArray[index]
					this.editIndex = index
					this.experienceShow = true
					console.log(index,'lilili')
					this.experienceForm.cycle = experience.cycle
					this.experienceForm.describe = experience.describe
					this.experienceForm.name = experience.name
					this.experienceForm.work = experience.work
				
				 
				
			 }
		    },
			computed:{
				testExperience(){
					if(this.editIndex < 0){
						return '新增项目经验'
					}else{
						return '修改项目经验'
					}
				}
			}
	}
</script>

<style lang="less" scoped="scoped">
	.box{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tags{
		margin-right: 10px;
	}
	.experience{
		margin-left: 0px;
	}
	.el-table-column{
		height: 50px;
	}
	.describe{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
